/**
* 修改基地
*/
<template>
    <vp-dialog ref="editDialogRef" :span="1">
        <template #title>
            <vp-label v-if="type == 'add'" zh="新增" en="Add" align="left" />
            <vp-label v-else zh="修改" en="Edit" align="left" />
        </template>
        <el-form label-suffix=":" v-loading="loading" :model="formData" :rules="formRules" ref="formRef"
            label-width="120px">
            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="fid">
                        <template #label><vp-label zh="上级基地" en="Dprt Code" /></template>
                        <VpBaseSelectTree :selectedId="formData.fid" @treeSelected="handleBaseSelected"
                            class="w100"></VpBaseSelectTree>
                    </el-form-item>
                </vp-col>
                <vp-col :span="1">
                    <el-form-item prop="mc">
                        <template #label><vp-label zh="名称" en="Name" /></template>
                        <el-input v-model="formData.mc" v-trim maxlength="100"></el-input>
                    </el-form-item>
                </vp-col>
            </el-row>
        </el-form>
        <template #footer>
            <vp-btn-confirm :loading="saveLoading" @click="handleSave" />
        </template>
    </vp-dialog>
</template>
<script setup lang="ts" name="editBase">
import { defineAsyncComponent, ref } from 'vue';
import request from '/@/utils/request';
import validateUtils from '/@/utils/validateUtils';

import VpBaseSelectTree from '/@/components/vp/base/VpBaseSelectTree.vue';

const emits = defineEmits(['formSubmited']);
const formData = ref({
    id: "",
    fid: "",
    mc: "",
});
const formRules = {
    fid: [validateUtils.notNull],
    mc: [validateUtils.notNull]
}


const loading = ref(false);
const saveLoading = ref(false);
const editDialogRef = ref();
const formRef = ref();
const type = ref('add');

const initForm = () => {
    formData.value = {
        id: "",
        fid: "",
        mc: "",
    }
}
const handleSave = () => {
    if (loading.value) {
        return;
    }
    saveLoading.value = true;
    formRef.value.validate((valid: Boolean) => {
        if (valid) {
            request.post("/system/base/" + type.value, {
                ...formData.value
            }).then(() => {
                emits("formSubmited");
                editDialogRef.value.handleClose();
            }).catch(() => {
            }).finally(() => {
                saveLoading.value = false;
            })
        } else {
            saveLoading.value = false;
        }
    })
}
const handleOpen = (_type: string, fid: string, id: string) => {
    type.value = _type;
    initForm();
    editDialogRef.value.handleOpen();
    if (type.value === 'edit') {
        loading.value = true;
        request.get(`/system/base/${id}`).then((res) => {
            formData.value = {
                ...formData.value,
                ...res.data
            };
            loading.value = false;
        })
    } else {
        formData.value.fid = fid;
    }
}

// 选择基地后回调事件
const handleBaseSelected = (data: any) => {
    formData.value.fid = data.id;
}

defineExpose({
    handleOpen,
})

</script>
